<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看所有试卷</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/popper.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.js"></script>
</head>

<body>
    <div id="app" class="container" style="padding: 80px 100px 10px;">
        <div><a class="btn btn-outline-primary btn-block" href='addPaper_1.html'>新建试卷</a></div>
        <div id="conditions" class="input-group" style="margin-top: 20px;">
            <div class="input-group col-sm-4" style="align-items:center;">
                <span class="input-group-addon">试卷分类：</span>
                <select v-model="paperClassificationId" class="form-control">
                    <option value="0">所有</option>
                    <option v-for="classification in classifications" :value="classification.id">{{classification.name}}</option>
                </select>
            </div>
            <div class="input-group col-sm-3" style="align-items:center;">
                <span class="input-group-addon">试卷类型：</span>
                <select v-model="testType" class="form-control">
                    <option value="0">所有</option>
                    <option value="1">模拟试卷</option>
                    <option value="2">测试试卷</option>
                    <option value="3">其他</option>
                </select>
            </div>
            <div class="input-group col-sm-3" style="align-items:center;">
                <span class="input-group-addon">试卷类型：</span>
                <select v-model="status" class="form-control">
                    <option value="0">所有</option>
                    <option value="1">未发布</option>
                    <option value="2">已发布</option>
                </select>
            </div>
            <div class="col-sm-2" style="text-align: center;"><button class="btn btn-primary" @click="searchPaper()">搜索</button></div>
        </div>

        <div style="height: 350px;margin-top: 50px;">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>试卷名</th>
                        <th>试卷类型</th>
                        <th>试卷分类</th>
                        <th>试卷状态</th>
                        <th>查看</th>
                        <th>操作</th>

                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(paper,index) in papersInTable">
                        <td>{{index}}</td>
                        <td>{{paper.name}}</td>
                        <td>
                            <div v-if="paper.testType==1">模拟试卷</div>
                            <div v-if="paper.testType==2">测试试卷</div>
                            <div v-if="paper.testType==3">其他试卷</div>
                        </td>
                        <td>
                            <div v-for="classification in classifications">
                                <div v-if="classification.id==paper.classificationId">
                                    {{classification.name}}
                                </div>

                            </div>
                        </td>
                        <td>
                            <div v-if="paper.status==1">未发布</div>
                            <div v-if="paper.status==2">已发布</div>
                        </td>
                        <td>
                            <button class="btn btn-primary" @click='showPaper(paper.id)'>查看</button>
                        </td>
                        <td>
                            <button class="btn btn-warning" @click=changeStatus(paper.id,paper.status)>发布</button>
                            <button class="btn btn-warning" @click=changePaper(paper.id)>修改</button>
                        </td>

                    </tr>
                </tbody>

            </table>
        </div>
        <div class="input-group" style="text-align: center;">
            <div class="col-sm-1"><button class="btn btn-primary btn-sm" @click="prevPage()">上一页</button></div>
            <div v-for="index in pageTotalNum" class="col-sm-1"><button class="btn btn-primary btn-sm" @click="changePage(index)">{{index}}</button></div>
            <div class="col-sm-1"><button class="btn btn-primary btn-sm" @click="nextPage()">下一页</button></div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                token: "",
                refreshToken: "",
                classifications: [],
                paperClassificationId: "0",
                testType: "0",
                status: "0",
                papers: [],
                papersInTable: [],
                pageSize: 3,
                pageTotalNum: 0,
                currentPageNum: 1,
                storage: undefined
            },
            mounted() {
                window.showInTable = this.showInTable;
                window.searchPaper = this.searchPaper;
                this.storage = window.localStorage;
                this.token = this.storage.getItem("token");
                this.refreshToken = this.storage.getItem("refreshToken");
                axios.get("/paperClassification/all", {
                    headers: {
                        "Content-Type": "application/json;charset=utf8",
                        "token": this.token,
                        "refreshToken": this.refreshToken
                    }
                }).then(res => {
                    // console.log(res);
                    this.classifications = res.data.data;
                });
            },
            methods: {
                changePaper:function(id){
                    window.location.href="/paper/addPaper_2.html?paperId="+id;
                },
                searchPaper: function() {

                    this.token = this.storage.getItem("token");
                    this.refreshToken = this.storage.getItem("refreshToken");
                    axios.post("/paper/allWithConditions", {
                        "classificationId": this.paperClassificationId,
                        "testType": this.testType,
                        "status": this.status
                    }, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        console.info(res.data.data)
                        this.papers = res.data.data;
                        var temp1 = this.papers;
                        var num = temp1.length % this.pageSize;
                        if (num > 0) {
                            this.pageTotalNum = (temp1.length - num) / this.pageSize + 1;
                        } else {
                            this.pageTotalNum = (temp1.length - num) / this.pageSize
                        }
                        showInTable();
                    });

                },
                showInTable() {
                    var temp = this.papers;
                    this.papersInTable = temp.slice((this.currentPageNum - 1) * this.pageSize, this.currentPageNum * this.pageSize);
                },
                changePage: function(page) {
                    this.currentPageNum = page;
                    showInTable();
                },
                prevPage() {
                    if (this.currentPageNum == 1) return;
                    this.currentPageNum--;
                    this.showInTable();
                },

                nextPage() {
                    if (this.currentPageNum == this.totalPage) return;

                    this.currentPageNum++;
                    this.showInTable();

                },
                changeStatus(id, tipe) {
                    console.info(id + '-----' + tipe);
                    if (id <= 0) {
                        alert('??????');
                        return;
                    }
                    var url1 = "";
                    //发布
                    if (tipe == 1) {
                        url1 = "/paper/updateStatus/2/" + id;
                    }
                    //存草稿
                    if (tipe == 2) {
                        url1 = "/paper/updateStatus/1/" + id;
                    }
                    axios.get(url1, {
                        headers: {
                            "Content-Type": "application/json;charset=utf8",
                            "token": this.token,
                            "refreshToken": this.refreshToken
                        }
                    }).then(res => {
                        if (res.data.code == 200) {
                            searchPaper();
                            console.info('更改成功');
                        }
                    })
                },
                showPaper: function(id) {
                    console.info(id);
                    window.location.href = "./showPaper.html?id=" + id;
                }
            }
        })
    </script>
</body>

</html>